<!--
 * @Author: xiaopang
 * @Date: 2025-10-16 11:28:32
 * @LastEditTime: 2025-10-24 16:21:39
 * @LastEditors: xiaopang
-->
<template>
  <div class="bg-white rounded-8px pt-20px pb-40px px-10px text-14px text-#333333">
    <div class="mb-12px">
      <div class="font-bold">订单金额</div>
      <div class="h-40px leading-40px pl-10px mt-8px bg-#F8F8F8 rounded-2px border border-solid border-#F3F3F3">1</div>
    </div>
    <div class="mb-12px">
      <div class="font-bold">核销金额</div>
      <div class="h-40px leading-40px pl-10px mt-8px bg-#F8F8F8 rounded-2px border border-solid border-#F3F3F3">1</div>
    </div>
    <div class="mb-20px">
      <div class="font-bold">还需支付</div>
      <div class="h-40px leading-40px pl-10px mt-8px bg-#F8F8F8 rounded-2px border border-solid border-#FF4B36 text-#FF4B36">1</div>
    </div>

    <!-- 二维码区域 -->
    <div class="mb-20px">
      <div class="flex items-center justify-center">
        <canvas ref="qrcodeCanvas"></canvas>
      </div>
    </div>

    <div class="flex items-center justify-center w-105px h-40px mx-auto bg-#FC6C53 rounded-4px text-16px text-#fff">核销完成</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import QRCode from 'qrcode';

const qrcodeCanvas = ref(null);

// 生成二维码
const generateQRCode = async text => {
  try {
    if (qrcodeCanvas.value) {
      await QRCode.toCanvas(qrcodeCanvas.value, text, {
        width: 150,
        margin: 2,
        color: {
          dark: '#000000',
          light: '#FFFFFF'
        }
      });
    }
  } catch (error) {
    console.error('二维码生成失败:', error);
  }
};

onMounted(() => {
  // 这里可以传入订单号或其他需要生成二维码的内容
  const orderInfo = {
    orderId: '202510240001',
    amount: 100,
    timestamp: Date.now()
  };
  generateQRCode(JSON.stringify(orderInfo));
});
</script>
